<template>
  <div>
    <el-dropdown trigger="hover" :show-timeout="0" class="cP">
      <span>
        <el-icon
          :style="{
            color:navIsTo
              ? 'var(--menuColorFont)'
              : 'var(--navColorFont)',
          }"
          class="llt-icon-size position-relative"
          ><bell
        /></el-icon>
        <div class="llt-badge"></div>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-tabs
            class="header-message-tabs p20"
            v-model="activeName"
            @tab-click="handleTagMessageClick"
          >
            <el-tab-pane :label="`消息(${storeMessage.getmyMsg.length})`" name="first">
              <el-scrollbar height="200px">
                        <div class="item" 
                v-for="item in storeMessage.getmyMsg" 
               
                :key="item.id">
               <div class="jcb aic">
                 <p>{{ item.title }}</p>
                   <el-link class="flex-shrink0"
                    @click="handlereadSwitch(item)"
                    type="primary">已读</el-link>
               </div>
                <span>代办内容：{{ item.content }}</span>
                </div>
                <el-result title="抱歉，当前没有消息通知。" 
                v-if="storeMessage.getmyMsg.length==0"
                sub-title="">
                  <template #icon>
                    <img style="width: 100px" :src="baseUrl+'icon/emptyData.svg'" alt="" />
                  </template>
                </el-result>
              </el-scrollbar>
            </el-tab-pane>
            <el-tab-pane :label="`待办(${storeMessage.getmyTodo.length})`" name="third">
              <el-scrollbar height="200px">
                <div class="item" 
               
                v-for="item in storeMessage.getmyTodo" 
                  @click="handlereadSwitch2(item)"
                :key="item.id">
                  <div class="jcb aic">
                 <p>{{ item.title }}</p>
                   <!-- <el-link
                  
                    type="primary">强制完成</el-link> -->
               </div>
                <span>代办内容：{{ item.content }}</span>
                </div>
                   <el-result title="抱歉，当前没有代办。" 
                v-if="storeMessage.getmyTodo.length==0"
                sub-title="">
                  <template #icon>
                    <img style="width: 50px" :src="baseUrl+'icon/emptyData.svg'" alt="" />
                  </template>
                </el-result>
              </el-scrollbar>
            </el-tab-pane>
          </el-tabs>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance, computed, onMounted } from "vue";
import SearchDocument from "/@/components/search/search.vue";
import { useIndexStore } from "/@ts/store";
import { useMessageStore } from "/@ts/store/modules/message";
import { readSwitch} from "/@ts/layouts/components/api";
import router from "/@ts/router";
const baseUrl = import.meta.env.VITE_BASE
const storeMessage = useMessageStore();
const store = useIndexStore();
const navIsTo = computed(() => store.getNavIsTo);
let activeName = ref("first");
const handleTagMessageClick = (e: any) => {
  activeName.value = e.paneName;
};

const handlereadSwitch2 = (row:any) =>{
  //整改意见
// itemOption,
//场地督办
// supervise
  if(row.module=='itemOption'){
    router.push({
      path:'/rectification',
      query:{
        id:row.moduleId
      }
    })
  }else  if(row.module=='supervise'||row.module=='superviseConfirm'){
  
          router.push({
      path:'/venue',
      query:{
        id:row.moduleId
      }
    })
  }
}
const handlereadSwitch = (row:any) =>{
  readSwitch(row.id)
  .then((result) => {
//     storeMessage.myTodoUpdate()
// storeMessage.myMsgUpdate()
  }).catch((err) => {
    
  });
}
onMounted(()=>{
// storeMessage.myTodoUpdate()
// storeMessage.myMsgUpdate()
})
defineProps({

});
</script>

<style scoped lang="scss">
.menu-logo-box {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  height: 54px;
  background-color: #001529;

  img {
    width: 45px;
  }

  div {
    font-size: 22px;
    color: #fff;
    font-weight: bold;
    margin-left: 15px;
  }
}
  .item{
    color: #333;
    cursor: pointer;
    p{
       font-weight: bold;
       font-size: 16px;
    } 
    span{

    }
  }
</style>
